<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <div th:include="/common/assets::header"></div>
    <link rel="stylesheet" th:href="@{/css/sys/home.css}">
</head>
<body class="layui-layout-body">
<!-- 页面布局 -->
<div class="layui-layout layui-layout-admin">
    <!-- 头部 -->
    <div class="layui-header">
        <!-- 头部左侧图标 -->
        <div class="layui-logo">这里是图标</div>
        <!-- 头部右侧中的菜单栏 -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <!--<span class="layui-nav-bar" style="left: 20px; top: 55px; width: 0px; opacity: 0;"></span>-->
        </ul>
        <!-- 头部右侧头像、个人信息 -->
        <ul class="layui-nav layui-layout-right">
            <!-- 消息中心 -->
            <li class="layui-nav-item">
                <!-- 铃铛图标和小红点 -->
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-notice" style="font-size: 18px;"></i>
                    <span class="layui-badge-dot" style="margin: -14px 16px 0;"></span>
                    <span class="layui-nav-more" style="display: none;"></span>
                </a>
                <!-- 收到的消息 -->
                <dl class="layui-nav-child layui-anim layui-anim-upbit msg-tab-box">
                    <dd>
                        <div>
                            <ul>
                                <li class="msg-tab-left msg-tab-active-left">通知</li>
                                <li class="msg-tab-right">私信</li>
                            </ul>
                            <div class="layui-tab-content msg-tab-content">
                                <ul>
                                    <li>消息1</li>
                                    <li>消息2</li>
                                    <li>消息3</li>
                                </ul>
                            </div>
                        </div>
                    </dd>
                    <dd class="msg-tab-more"><label class="blog-menu" data-type="tabAdd">查看全部</label></dd>
                </dl>
            </li>
            <!--<span class="layui-nav-bar" style="left: 76px; top: 55px; width: 0px; opacity: 0;"></span>-->
            <!-- 个人信息 -->
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img th:src="@{/images/sys/logo.png}" class="layui-nav-img">
                    江一道
                    <span class="layui-nav-more"></span>
                </a>
                <!-- 个人信息下拉菜单 -->
                <dl class="layui-nav-child layui-anim layui-anim-upbit">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
        </ul>
    </div>
    <!-- 左侧菜单 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧菜单导航项 -->
            <ul class="layui-nav layui-nav-tree">
                <!-- layui-nav-itemed：加了这个后默认打开菜单 -->
                <!-- 一级菜单 -->
                <li class="layui-nav-item layui-nav-itemed">
                    <!-- 一级菜单项 -->
                    <a class="" href="javascript:;">所有商品<span class="layui-nav-more"></span></a>
                    <!-- 二级菜单 -->
                    <dl class="layui-nav-child">
                        <!-- 二级菜单项 -->
                        <dd class="blog-menu" data-type="tabAdd"><a href="javascript:;">列表一</a></dd>
                        <dd class="blog-menu" data-type="tabAdd"><a href="javascript:;">列表二</a></dd>
                        <dd class="blog-menu" data-type="tabAdd"><a href="javascript:;">列表三</a></dd>
                        <dd class="blog-menu" data-type="tabAdd"><a href="javascript:;">超链接</a></dd>
                    </dl>
                </li>
                <!-- 一级菜单 -->
                <li class="layui-nav-item">
                    <!-- 一级菜单项 -->
                    <a class="" href="javascript:;">所有商品<span class="layui-nav-more"></span></a>
                    <!-- 二级菜单 -->
                    <dl class="layui-nav-child">
                        <!-- 二级菜单项 -->
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 页面主体部分 -->
    <div class="layui-body">
        <div class="layui-tab" lay-filter="tabs" lay-allowclose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="11">网站设置</li>
                <li lay-id="22">用户管理</li>
                <li lay-id="33">权限分配</li>
                <li lay-id="44">商品管理</li>
                <li lay-id="55">订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">内容1</div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">内容4</div>
                <div class="layui-tab-item">内容5</div>
            </div>
        </div>
        <div class="site-demo-button" style="margin-bottom: 0;">
            <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
            <button class="layui-btn site-demo-active" data-type="tabDelete">删除：商品管理</button>
            <button class="layui-btn site-demo-active" data-type="tabChange">切换到：用户管理</button>
        </div>
    </div>
    <!-- 底部 -->
    <div class="layui-footer">
        哼，你才是傻瓜子
    </div>
</div>
<script th:src="@{/js/sys/home.js}"></script>
</body>
</html>